﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Report.aspx.cs" Inherits="Easy.Web.Pages.DataPages.Report" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Report</title>
    <link href="/_css/bootstrap.min.css" rel="stylesheet" />
    <script src="/_js/jquery-1.9.1.min.js"></script>
    <script src="/_js/bootstrap.min.js"></script>
    <script src="/_js/echarts.min.js"></script>
    <style>
        /*.table{border-radius: 10px;border:1px solid red;-moz-border-radius: 5px;-webkit-border-radius: 5px;}*/
    </style>

    <script type="text/javascript">
        window.onload = function () {
            GetReportData();
        }

        function GetReportData() {
            var procname = $('#reportproc', parent.document).val();
            var param = {};
            $("#screenshow input[param='true']", parent.document).each(function () {
                var elem = $(this);
                var key = elem.attr("paramname");
                var value;

                switch (elem.attr("atttype")) {
                    case "picklist":
                        //对picklist添加  默认选择value  存在picktext或为true时选择 text
                        if (!!elem.attr("picktext") || elem.attr("picktext") == 'true') {
                            value = elem.text();
                        }
                        else {
                            value = elem.val();
                        }
                        break;
                    case "lookup": value = elem.attr("oid");
                        break;
                    default:
                        value = elem.val();
                        break;
                }
                param[key] = value;
            });

            $.ajax({ 
                url: "/Service/Data/GetReportListData.ashx",
                type: "post",
                dataType: "json",
                data: {
                    "sp": procname,
                    "parameters": JSON.stringify(param)
                },
                success: function (data) {
                    eval($('#reportjs', parent.document).val()); //function 
                    handleData(data);
                },
                error: function (err) {
                    console.log(err);
                }
            });
        }

        function getEcharts(xData, yData, series_name) {
            var name = new Array();
            for (var i in series_name) {
                name.push(series_name[i]);
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('dataEcharts'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: ''
                },
                tooltip: {},
                legend:{
                    //legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应  
                    data: name
                },
                toolbox: {
                    //显示策略，可选为：true（显示） | false（隐藏），默认值为false  
                    show: true,
                    //启用功能，目前支持feature，工具箱自定义功能回调处理  
                    feature: {
                        //辅助线标志  
                        mark: { show: true },
                        //dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退  
                        dataZoom: {
                            show: true,
                            title: {
                                dataZoom: '区域缩放',
                                dataZoomReset: '区域缩放后退'
                            }
                        },
                        //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能  
                        dataView: { show: true, readOnly: true },
                        //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换  
                        magicType: { show: true, type: ['line', 'bar'] },
                        //restore，还原，复位原始图表  
                        restore: { show: true },
                        //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'  
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    data: xData
                },
                yAxis: {}
            };

            option.series = [];
            for (var i = 1, j = 0; i < yData.length; i++, j++) {
                var colorList = [
                   '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                   '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                   '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                ];
                //柱形图颜色
                if (j > 14) {
                    j = 0;
                }
                var mycolor = colorList[j];

                if (yData.length == 2) {//柱形图只有一种数据时颜色
                    option.series.push({
                        //name: name[i],
                        type: 'bar',
                        //data: yData,
                        data: yData[i],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                       '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                       '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                       '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {//上方字体颜色
                                        //color:'#000000'
                                    }
                                }

                            }
                        }
                    });
                }
                else {//多种数据类型
                    option.series.push({
                        name: name[i],
                        type: 'bar',
                        //data: yData,
                        data: yData[i],
                        barGap:'0',     //柱间距离，默认为柱形宽度的30%，可设固定值
                        //barCategoryGap: '1%',     //类目间柱形距离，默认为类目间距的20%，可设固定值
                        itemStyle: { 
                            normal: {
                                color: mycolor,
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {//上方字体颜色
                                        //color:'#000000'
                                    }
                                }

                            }
                        }
                    });
                }

            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function getTable(item, title) {
            var str = "<table class='table'><thead><tr>";
            for (i in item[0]) {
                str += "<th>" + title[i] + "</th>";
            }
            str += "</tr></thead>";
            //遍历对象数组
            for (i in item) {
                str += "<tbody><tr>";

                for (c in item[i]) {
                    str += "<td>" + item[i][c] + "</td>";
                }
                str += "</tr></tbody>";
            }
            str += "</table>";

            $("#dataTable").html(str);
            $("#dataTable").css('height', $("#dataTable table").height() + 38 + "px");
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:HiddenField ID="reportid" runat="server" />
        <div class="col_md-12">
            <div class="col-md-12" style="text-align:center;">
                <h2 id="charttitle">
                   
                </h2>
                <hr/>
            </div>

            <!--数据表格-->
            <div class="col-md-12 table-responsive">
              <table class="table" style="border:1px inset;">
                <!--<caption>响应式表格布局</caption>-->
                <thead style="background:#6A8DB7;border:1px inset">
                  <tr>
                    <th style="color:white">数据</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                        <div id="dataTable" class="col-md-12 table-responsive" style="margin:0 auto 0 auto;padding:0;width:100%;height:400px;background:#F5F6FA">
                          
                        </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!--图表-->
            <div class="col-md-12 table-responsive">
              <table class="table" style="border:1px inset;">
                <!--<caption>响应式表格布局</caption>-->
                <thead style="background:#6A8DB7;border:1px inset">
                  <tr>
                    <th style="color:white">图形</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                        <div id="dataEcharts" class="col-md-12 table-responsive" style="margin:0 auto 0 auto;padding:0;width:100%;height:400px;background:#F5F6FA"></div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>


        </div>
    </form>
</body>
</html>
